<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html>
	<head>
		<base href="<%=basePath %>">
		<meta charset="utf-8">
		<title>物流订单系统</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<link rel="stylesheet" href=css/bootstrap.min.css>
		<style type="text/css">
			div.image{
				width:150px;
				float:left;
				opacity:.5;
			}
			div.selected{
				opacity:1;
			}
			.image img{
				width:100%;
			}
		</style>
		<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=0rdo14pf61sT5rIij9IQEUYzbgIHF6Tl"></script>
		<script>
			$(function(){
				// 百度地图API功能
				var map = new BMap.Map("allmap");    // 创建Map实例
				map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
				//添加地图类型控件
				map.addControl(new BMap.MapTypeControl({
					mapTypes:[
			            BMAP_NORMAL_MAP,
			            BMAP_HYBRID_MAP
			        ]}));	  
				map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
				map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
				var driving;
				var searchComplete = function (results){
					if (driving.getStatus() != BMAP_STATUS_SUCCESS){
						return ;
					}
					var plan = results.getPlan(0);
					var distance = plan.getDistance(true);             //获取距离
					$("#distance").text(distance);
					$("#distance_hidden").val(parseFloat(distance));

					//获取车型的里程价格信息
					var price = ${order.carType.price}; //每5公里价格
					var perPrice = ${order.carType.perPrice}; //每公里价格
					//计算所需的钱数

					var planPrice;
					if(parseFloat(distance) <= 5){
						planPrice = price;
					}else{
						var duoyu = parseFloat(distance) - 5;
						planPrice = price + duoyu * perPrice;
					}
					$("#price").text(planPrice + " 元");
					$("#price_hidden").val(planPrice);
				}
				var start = "${order.start}";
				var end = "${order.dest}";
				//三种驾车策略：最少时间，最短距离，避开高速
				var routePolicy = [BMAP_DRIVING_POLICY_LEAST_TIME,BMAP_DRIVING_POLICY_LEAST_DISTANCE,BMAP_DRIVING_POLICY_AVOID_HIGHWAYS];
				map.clearOverlays(); 
				search(start,end,routePolicy[0]); 
				function search(start,end,route){ 
					driving = new BMap.DrivingRoute(map, {
						renderOptions:{map: map, autoViewport: true},
						policy: route,
						onSearchComplete: searchComplete
					});
					driving.search(start,end);
				}

				
			});

			
		</script>
	</head>
	<body >
		<%@include file="/header.jsp" %>
		<div class="container">
		<h1>用户订单详情</h1>
		<hr />
		<div class="row">
			<div id="allmap" style="height:500px;" class="col-sm-8"></div>
			<div class="col-sm-4">
				<form action="order/jiedan" method="post">
				<input type="hidden" name="id" value="${order.id }"/>
				<p>起点：${order.start }</p>
				<p>目的地：${order.dest }</p>
				<p>所需车型：${order.carType.name }</p>
				<p>距离: <span id="distance"></span></p>
				<p>预计费用： <span id="price"></span></p>
				<button type="submit" class="btn btn-primary">确认接单</button>
				</form>
			</div>
		</div>
		</div>
	</body>
</html>
